<template>
    <view style="height: 100%">
        <ul class="db" v-if="list.length != 0">
            <block v-for="(item, index) in list" :key="index">
                <li class="bgcf br12 pd015 db mb12 pr">
                    <navigator class="db" :url="'/pages/purchase/purchaseDetail?id=' + item.id" hover-class="none" open-type="navigate">
                        <view class="df ac h44 bbf1">
                            <p class="f12 c9d">发布日期：{{ item.created_at }}</p>
                            <p class="f12 c9d ml24">浏览量：{{ item.views }}</p>
                            <p class="f12 c9d f1 tr">查看量：{{ item.vcount }}</p>
                        </view>
                        <view class="pd150">
                            <view class="df ac sb">
                                <p class="f14 c28 f600">{{ item.spare_parts_name }}</p>
                                <p class="f14 c10 f600" v-if="item.status == 1">询价中</p>
                                <p class="f14 c10 f600" v-if="item.status == 2">待审核</p>
                                <p class="f14 c9d f600" v-if="item.status == 4">已下架</p>
                                <p class="f14 c9d f600" v-if="item.status == 5">已截止</p>
                                <p class="f14 cf5 f600" v-if="item.status == 3">已驳回</p>
                            </view>
                            <p class="f12 c9d db mt8">数量：{{ item.count }}件</p>
                            <p class="f12 c9d db mt3">报价截止：{{ item.end_at }}</p>
                            <view class="reject-box mt15" v-if="item.status == 3">驳回原因：{{ item.reject_content }}</view>
                        </view>
                    </navigator>
                    <view class="dot-box-pos" v-if="item.status == 1 || item.status == 4 || item.status == 3 || item.status == 5">
                        <ul class="list-more df ac sb" @tap.native="onOperation($event, { id: item.id, status: item.status })" :data-id="item.id" :data-status="item.status">
                            <li class="list-dot"></li>
                            <li class="list-dot"></li>
                            <li class="list-dot"></li>
                        </ul>
                    </view>
                </li>
            </block>
        </ul>
        <view class="df jc mt30" v-else>
            <image src="https://wx.xtwaixie.com/img/empty.png" class="w50" mode="aspectFit"></image>
        </view>
        <van-popup :show="show" position="bottom">
            <ul class="db">
                <li class="df ac jc h48 f16 c28" v-if="status == 1" @tap.native="onDown">下架</li>
                <li class="df ac jc h48 f16 c28" v-if="status == 1 || status == 4 || status == 3 || status == 5" @tap.native="goSubDemand">编辑</li>
                <li class="db h10 bgcf7"></li>
                <li class="df ac jc h48 f16 c6b" @tap.native="onClose">取消</li>
            </ul>
        </van-popup>
    </view>
</template>

<script>
import http from '../../utils/http';
export default {
    data() {
        return {
            page: 1,
            pagesize: 10,
            list: [],
            pageTotal: '',
            show: false,
            status: '',
            id: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.pageTotal > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getList();
        } else {
            uni.showToast({
                title: '没有更多了~',
                icon: 'none'
            });
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onOperation(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let id = e.currentTarget.dataset.id;
            let status = e.currentTarget.dataset.status;
            this.setData({
                show: true,
                status: status,
                id: id
            });
        },

        getList() {
            let data = {
                page: 1,
                pagesize: 10
            };
            http.request('user/myDemand', data)
                .then((res) => {
                    res.data.list.forEach((i) => {
                        this.list.push(i);
                    });
                    this.setData({
                        list: this.list,
                        pageTotal: res.data.pageTotal
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 下架
        onDown() {
            let data = {
                id: this.id
            };
            http.request('user/downDemand', data)
                .then((res) => {
                    console.log(res);
                    this.setData({
                        list: [],
                        page: 1
                    });
                    this.getList();
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 去编辑
        goSubDemand() {
            uni.navigateTo({
                url: '/pages/demand/subDemand?id=' + this.id
            });
        },

        onClose() {
            this.setData({
                show: false,
                id: '',
                status: ''
            });
        }
    }
};
</script>
<style>
@import './purchase.css';
</style>
